
<template>
    <div>
        <div id="shopCart" @click="toggleList">
            <div class="con">
                <div class="con-left">
                    <div class="logo-wrapper">
                        <div class="logo" :class="{'highlight': totalCount > 0}">
                            <span class="icon-shopping_cart" :class="{'highlight': totalCount > 0}"></span>
                        </div>
                        <div class="num" v-show="totalCount > 0">{{totalCount}}</div>
                    </div>
                    <div class="price" :class="{'highlight': totalPrice > 0}">￥{{totalPrice}}</div>
                    <div class="desc">另需配送费￥{{deliveryPrice}}</div>
                </div>
                <div class="con-right" :class="{'settlement': totalPrice >= minPrice}" @click.stop="payShow">{{payDesc}}</div>
            </div>
            <div class="ball-con">
                <div v-for="(ball,index) in balls">
                    <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                        <div class="ball" v-show="ball.show">
                            <div class="inner inner-hook"></div>
                        </div>
                    </transition>
                </div>
            </div>
            <transition name="fold">
                <div class="shopCart-list" v-show="listShow">
                    <div class="list-header">
                        <h1 class="title">购物车</h1>
                        <span class="empty" @click.stop="empty">清空</span>
                    </div>
                    <div class="list-content" ref="listContent">
                        <ul class="food-list">
                            <li v-for="(food,index) in selectFoods" class="food-item">
                                <span class="name">{{food.name}}</span>
                                <div class="price">
                                    <span>￥{{food.price*food.count}}</span>
                                </div>
                                <div class="cartControl-wrapper">
                                    <cartControl @add="addFood" :food="food"></cartControl>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
        <transition name="slide">
            <div id="promt" v-show="payStatus">{{money}}</div>
        </transition>
        <transition name="fade">
            <div id="list-mark" v-show="listShow" @click="toggleList"></div>
        </transition>
    </div>
</template>



<script>

import BScroll from 'better-scroll';
import CartControl from 'components/cartControl/cartControl.vue';   //购买按钮组件

export default {
    props: {
        deliveryPrice: {
            type: Number,
            default: 0
        },
        minPrice: {
            type: Number,
            default: 0
        },
        selectFoods: {
            type: Array,
            default() {
                return [
                    {
                        price: 0,
                        count: 0
                    }
                ]
            }
        }
    },
    data(){
        return {
            payStatus: false,
            balls: [
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                }
            ],
            dropBalls: [],
            fold: true    //默认为折叠状态
        }
    },
    computed: {
        totalPrice(){
            let allPrice = 0;
            this.selectFoods.forEach((food) => {
                allPrice += food.price*food.count;
            });
            return allPrice;
        },
        totalCount(){
            let allCount = 0;
            this.selectFoods.forEach((food) => {
                allCount += food.count;
            });
            return allCount;
        },
        payDesc(){
            if(this.totalPrice >= this.minPrice){
                return `去结算`;
            }else if(this.totalPrice < this.minPrice && this.totalPrice > 0){
                let diffPrice = this.minPrice - this.totalPrice;
                return `还差￥${diffPrice}起送`;
            }else if(this.totalPrice === 0){
                return `￥${this.minPrice}起送`;
            }
        },
        money(){
            let allMoney = this.totalPrice + this.deliveryPrice;
            return `您一共需要支付￥${allMoney}！`;
        },
        listShow(){
            if(!this.totalCount){
                this.fold = true;
                return;
            }
            let show = !this.fold;
            if(show){
                this.$nextTick(() => {
                    if(!this.scroll){
                        this.scroll = new BScroll(this.$refs.listContent, {
                            click: true
                        });
                    }else{
                        this.scroll.refresh();
                    }
                });
            }
            return show;
        }
    },
    methods: {
        payShow(){
            if(this.totalPrice < this.minPrice){
                return;
            }
            this.payStatus = true;
            setTimeout(() => {
                this.payStatus = false;
            }, 3000);
        },
        addFood(target) {
            this.drop(target);
        },
        drop(el){
            for(let i=0; i<this.balls.length; i++){
                let ball = this.balls[i];
                if(!ball.show){
                    ball.show = true;
                    ball.el = el;
                    this.dropBalls.push(ball);
                    return;
                }
            }
        },
        beforeDrop(el){   //过渡动画的3个钩子函数
            let count = this.balls.length;
            while(count--){
                let ball = this.balls[count];
                if(ball.show){
                    let rect = ball.el.getBoundingClientRect();   //获取该元素相对于视口的位置
                    let x = rect.left - 32;
                    let y = -(window.innerHeight - rect.top - 22);
                    el.style.display = '';
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                    el.style.transform = `translate3d(0,${y}px,0)`;
                    let inner = el.getElementsByClassName('inner-hook')[0];
                    inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
                    inner.style.transform = `translate3d(${x}px,0,0)`;
                }
            }
        },
        dropping(el,done){
            let rf = el.offsetHeight;
            this.$nextTick(() => {
                el.style.webkitTransform = 'translate3d(0,0,0)';
                el.style.transform = 'translate3d(0,0,0)';
                let inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.webkitTransform = 'translate3d(0,0,0)';
                inner.style.transform = 'translate3d(0,0,0)';
                el.addEventListener('transitionend', done);
            });
        },
        afterDrop(el){
            let ball = this.dropBalls.shift(); //取出做完动画的那个小球
            if(ball){
            ball.show = false;
            el.style.display = 'none';
           }
        },
        toggleList(){
            if(!this.totalCount){
                return;
            }
            this.fold = !this.fold;
        },
        empty(){
            this.selectFoods.forEach((food) => {
                food.count = 0;
            });
        }
    },
    components: {
        'cartControl': CartControl
    }
}

</script>


<style scoped lang="stylus" rel="stylesheet/stylus">

    @import '~common/stylus/mixin.stylus';
    #shopCart{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 100%;
        height: 48px;
        .con{
            display: flex;
            height: 48px;
            background: #141d27;
            font-size: 0;
            .con-left{
                flex: 1;
                .logo-wrapper{
                    display: inline-block;
                    vertical-align: top;
                    width: 56px;
                    height: 56px;
                    background: #141d27;
                    border-radius: 50%;
                    position: relative;
                    top: -10px;
                    margin: 0 12px;
                    padding: 6px;
                    box-sizing: border-box;
                    .logo{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background: #2b343c;
                        text-align: center;
                        &.highlight{
                            background: rgb(0,160,220);
                        }
                        .icon-shopping_cart{
                            font-size: 24px;
                            color: rgba(255,255,255,0.4);
                            line-height: 44px;
                            &.highlight{
                                color: #fff;
                            }
                        }
                    }
                    .num{
                        position: absolute;
                        right: -5px;
                        top: -5px;
                        width: 24px;
                        height: 16px;
                        line-height: 16px;
                        background: red;
                        padding: 2px;
                        color: #fff;
                        font-size: 10px;
                        text-align: center;
                        border-radius: 16px;
                        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
                    }
                }
                .price{
                    display: inline-block;
                    vertical-align: top;
                    color: rgba(255,255,255,0.4);
                    font-size: 16px;
                    font-weight: 700;
                    border-right: 1px solid rgba(255,255,255,0.4);
                    margin-top: 12px;
                    line-height: 24px;
                    padding-right: 12px;
                    box-sizing: border-box;
                    &.highlight{
                        color: rgb(255,255,255);
                    }
                }
                .desc{
                    display: inline-block;
                    vertical-align: top;
                    margin: 12px 0 0 12px;
                    line-height: 24px;
                    font-size: 12px;
                    color: rgba(255,255,255,0.4);
                    letter-spacing: 1px;
                }
            }
            .con-right{
                flex: 0 0 105px;
                width: 105px;
                background: #2b333b;
                height: 48px;
                line-height: 48px;
                text-align: center;
                font-size: 14px;
                font-weight: bold;
                color: rgba(255,255,255,0.4);
                &.settlement{
                    background: #00b43c;
                    color: #fff;
                }
            }
        }
        .ball-con{
            .ball{
                position: fixed;
                left: 32px;
                bottom: 22px;
                z-index: 200;
                /*transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41);*/
                transition: all 1s cubic-bezier(0.11, 0.93, 0.95, 0.03);
                .inner{
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: rgb(0,160,220);
                    transition: all 1s linear;
                }
            }
        }
        .shopCart-list{
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            transform: translate3d(0,-100%,0);
            transition: all 0.5s linear;
            &.fold-enter-active, &.fold-leave-active{
                transform: translate3d(0,-100%,0);
            }
            &.fold-enter, &.fold-leave-to{
                transform: translate3d(0,0,0);
            }
            .list-header{
                height: 40px;
                line-height: 40px;
                padding: 0 18px;
                background: #f3f5f7;
                border-bottom: 1px solid rgba(7,17,27,0.1);
                .title{
                    font-size: 14px;
                    color: rgb(7,17,27);
                    font-weight: normal;
                    float: left;
                }
                .empty{
                    display: block;
                    float: right;
                    font-size: 12px;
                    color: rgb(0,160,220);
                }
            }
            .list-content{
                max-height: 245px;
                padding: 0 18px;
                overflow: hidden;
                background: #fff;
                .food-list{
                    .food-item{
                        position: relative;
                        padding: 12px 0;
                        line-height: 24px;
                        box-sizing: border-box;
                        border-1px(rgba(7,17,27,0.1));
                        .name{
                            font-size: 14px;
                            color: rgb(7,17,27);
                        }
                        .price{
                            position: absolute;
                            right: 100px;
                            bottom: 12px;
                            font-size: 14px;
                            color: red;
                        }
                        .cartControl-wrapper{
                            position: absolute;
                            right: 0;
                            bottom: 2px;
                        }
                    }
                }
            }
        }
    }
    #promt{
        position: absolute;
        left: 20%;
        bottom: 50%;
        z-index: 200;
        width: 60%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: rgba(0,0,0,0.8);
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
        border-radius: 5px;
        &.slide-enter-active, &.slide-leave-active{
            transition: all 1s ease;
            opacity: 1;
            bottom: 50%;
        }
        &.slide-enter, &.slide-leave-to{
            opacity: 0;
            bottom: 0;
        }
    }
    #list-mark{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: 100%;
        height: 100%;
        background: rgba(7,17,27,0.6);
        backdrop-filter: blur(10px);
        transition: all 0.5s ease;
        &.fade-enter-active, &.fade-leave-active{
            background: rgba(7,17,27,0.6);
            opacity: 1;
        }
         &.fade-enter, &.fade-leave-to{
            background: rgba(7,17,27,0);
            opacity: 0;
        }
    }

</style>












